<template>
    <div class="public_main_style">
        <div class="public_main_head">
            <el-form :model="filters" inline label-width="100px" @submit.native.prevent>
                <el-row type="flex" align="middle">
                    <el-col :span="8">
                        <el-form-item label="广告类型:">
                            <el-select
                                    style="width:100%"
                                    size="small"
                                    clearable
                                    v-model="filters.type"
                                    placeholder="请选择反馈类型">
                                <el-option
                                        v-for="dict in dictArrs.ad_type"
                                        :key="dict.dictId"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态:">
                            <el-select
                                    style="width:100%"
                                    size="small"
                                    clearable
                                    v-model="filters.status"
                                    placeholder="请选择状态">
                                <el-option label="启用" value="0"/>
                                <el-option label="禁用" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="链接类型:">
                            <el-select
                                    style="width:100%"
                                    size="small"
                                    clearable
                                    v-model="filters.urlType"
                                    placeholder="请选择状态">
                                <el-option label="无" value="0"/>
                                <el-option label="外部跳转链接" value="1"/>
                                <el-option label="视频链接" value="2"/>
                                <el-option label="内部链接" value="3"/>
                                <el-option label="公告" value="4"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-col :span="3">
                        <el-form-item>
                            <el-button
                                    style="width:100%;"
                                    type="primary"
                                    size="small"
                                    @click="updataTableList(1)"
                                    icon="el-icon-search"
                            >搜索
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- ETable -->
        <ETable ref="table" :columns="tableHead" :getData="getTableData" @selectionChage="onSelectTableRow">
            <template slot="head">
                <el-row type="flex" justify="space-between">
                    <el-col :span="4">
                        <el-button
                                @click="addAd"
                                type="primary"
                                size="small"
                                icon="el-icon-circle-plus"
                        >
                            新增广告
                        </el-button>
                    </el-col>
                </el-row>
            </template>
            <template slot="status" slot-scope="{ row }">
                <el-tag
                        size="small"
                        :type="row.status == '1' ? 'danger' : 'primary'"
                >{{ row.status | userStatus }}
                </el-tag>
            </template>
            <template slot="value" slot-scope="{ row }">
                <div>{{ $getDict(dictArrs.ad_type, row.value) }}</div>
            </template>
            <template slot="adImgUrl" slot-scope="{ row }">
                <img class="ad-img" :src="row.adImgUrl" alt="">
            </template>
            <template slot="urlType" slot-scope="{ row }">
                <span v-if="row.urlType == '1'">外部链接</span>
                <span v-else-if="row.urlType == '2'">视频链接</span>
                <span v-else-if="row.urlType == '3'">内部链接</span>
                <span v-else-if="row.urlType == '4'">公告</span>
                <span v-else>无</span>
            </template>
            <template slot="handle" slot-scope="{ row }">
                <el-button
                        size="mini"
                        type="primary"
                        @click="onEditAd(row)">修改
                </el-button>
                <el-button
                        class="edit-btn"
                        size="mini"
                        type="danger"
                        @click="onDeleteAd(row.adId)">删除
                </el-button>
            </template>
        </ETable>
        <!-- 修改广告弹框 -->
        <editModal ref="editModal" :rowData="rowData" @refresh="updataTableList" />
        <!-- 新增广告弹框 -->
        <addModal ref="addModal" @refresh="updataTableList" />
    </div>
</template>

<script>
    import vueState from '@lib/vuexState'
    import http from "../../http/config";
    import editModal from './components/editModal'
    import addModal from './components/adModal'
    export default {
        name: "index",
        mixins: [vueState],
        data() {
            return {
                filters: {
                    type: '',
                    status: '',
                    urlType: ''
                },
                rowData: {},
                tableHead: [
                    {
                        type: 'selection'
                    },
                    {
                        prop: 'adId',
                        label: '主键',
                    },
                    // {
                    //     prop: 'type',
                    //     label: '链接类型'
                    // },
                    {
                        label: '广告类型',
                        slotName: 'value'
                    },
                    {
                        label: '广告图片URL',
                        width: 120,
                        slotName: 'adImgUrl'
                    },
                    {
                        prop: 'adImgName',
                        label: '广告图片名称',
                    },
                    {
                        prop: 'linksUrl',
                        label: '外部链接URL',
                    },
                    {
                        label: '链接类型',
                        slotName: 'urlType'
                    },
                    {
                        prop: 'videoUrl',
                        label: '视频链接URL',
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        slotName: 'status',
                    },
                    {
                        prop: 'level',
                        label: '权重',
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间',
                    },
                    {
                        prop: 'publishTime',
                        label: '上架时间',
                    },
                    {
                        prop: 'recallTime',
                        label: '下架时间',
                    },
                    {
                        label: '操作',
                        slotName: 'handle'
                    }
                ]
            }
        },
        created() {
            this.$store.dispatch('getDictlists', 'ad_type')
        },
        methods: {
            //获取列表数据
            async getTableData(arg) {
                return (await http.post('/cms/auth/advertise/listAdvertise', {...arg, ...this.filters}))
            },
            // 选择表格数据
            onSelectTableRow(row) {
                this.selectTableRow = row
            },
            //更新列表数据
            updataTableList(pageIndex) {
                this.$refs.table.updateTable(pageIndex)
            },
            // 操作表格行数据
            onShowModal(type) {
                if (this.selectTableRow.length == 1) {
                    this.feedbackId = this.selectTableRow[0].feedbackId
                    this.$refs[type].showModal = true
                } else {
                    this.feedbackId = ''
                    this.$message.error('请选择一行数据进行操作!')
                }
            },
            // 新增广告
            addAd () {
                this.$refs.addModal.showAddModal = true
            },
            // 修改广告
            onEditAd (row) {
                this.rowData = row
                if (this.$refs.editModal) this.$refs.editModal.showEditModal = true
            },
            // 删除广告
            onDeleteAd (adId) {
                this.$confirm('确定要删除这条广告吗？', '删除', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false
                }).then(() => {
                    http.post("/cms/auth/advertise/removeAd",adId).then(res => {
                        this.$message.success(res.msg)
                        this.updataTableList()
                    })
                })
            }
        },
        components:{
            addModal,editModal
        }
    }
</script>

<style lang="less" scoped>
    /deep/.edit-btn {
        margin-left: 0;
        margin-top: 10px;
    }
    .ad-img {
        width: 100%;
        height: auto;
    }
</style>
